<template>
    <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="200px" size="medium">
        <el-form-item label="服务名称" prop="safeName">
            <el-select v-model="ruleForm.safeName" placeholder="请选择" class="w300">
                <el-option v-for="item in cSelectList" :key="item" :label="item" :value="item">{{item}}</el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="" prop="freeName" v-show="ruleForm.safeName === '自定义服务'">
            <el-input type="text" v-model.trim="ruleForm.freeName" placeholder="请输入自定义名称" class="w300"></el-input>
        </el-form-item>
        <el-form-item label="消息渠道" prop="messageChannel">
            <el-checkbox-group v-model="ruleForm.messageChannel" class="w180" @change="showMessage">
                <el-checkbox v-for="(item,i) in cCheckList" :key="i" :label="item">{{item}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="灾害类型">
            <el-select v-model="ruleForm.weatherType" placeholder="请选择" class="w300">
                <el-option v-for="item in cSelectList2" :key="item" :label="item" :value="item">{{item}}</el-option>
            </el-select>
        </el-form-item>
        <template v-if="ruleForm.safeName === '尊享避灾服务'">
            <el-form-item label="app消息模板" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc" :disabled="ds1" :placeholder="desc" :rows="7" class="w300"></el-input>
            </el-form-item>
        </template>
        <template v-else>
            <el-form-item label="app消息模板" prop="pre_desc">
                <el-input type="textarea" v-model="ruleForm.pre_desc" :disabled="ds1" :placeholder="pre_desc" :rows="7" class="w300"></el-input>
            </el-form-item>
        </template>
        <template v-if="ruleForm.safeName === '尊享避灾服务'">
            <el-form-item label="短信模板" prop="desc2">
                <el-input type="textarea" v-model="ruleForm.desc2" :disabled="ds2" :placeholder="desc2" :rows="7" class="w300"></el-input>
            </el-form-item>
        </template>
        <template v-else>
            <el-form-item label="短信模板" prop="pre_desc2">
                <el-input type="textarea" v-model="ruleForm.pre_desc2" :disabled="ds2" :placeholder="pre_desc2" :rows="7" class="w300"></el-input>
            </el-form-item>
        </template>
        <el-form-item label="模板状态" prop="isUse">
            <el-select v-model="ruleForm.isUse" placeholder="请选择" class="w300">
                <el-option v-for="item in cSelectList3" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
            <el-button @click="onCancel()">取 消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
	export default {
        name: 'editMessage',
		data () {
			return {
                cCheckList: ['APP','短信'],
                cSelectList: ['基础天气服务','尊享避灾服务','自定义服务'],
                cSelectList2: ['暴雨','暴雪','积水','冰雹','台风','结冰'],
                cSelectList3: ['生效', '未生效'],
                pre_desc: '// 例：尊敬的张先生。您的爱车所在位置将在2小时后可能发生车辆砸损。请您在灾害发生前，将您的爱车挪至安全位置。若您避灾成功将获得一份奖励金。',
                pre_desc2: '// 例：尊敬的张先生。您的爱车所在位置将在2小时后可能发生车辆砸损。请您在灾害发生前，将您的爱车挪至安全位置。若您避灾成功将获得一份奖励金。请您点击链接查看详情：http://www.cheliangbizai.com/p/e0123dljx.html',
                desc: '// 例：尊敬的张先生。您的爱车所在位置将在2小时后可能发生车辆砸损。请您在灾害发生前，将您的爱车挪至安全位置。若您避灾成功将获得一份奖励金。',
                desc2: '// 例：尊敬的张先生。您的爱车所在位置将在2小时后可能发生车辆砸损。请您在灾害发生前，将您的爱车挪至安全位置。若您避灾成功将获得一份奖励金。请您点击链接查看详情：http://www.cheliangbizai.com/p/e0123dljx.html',
                flag : false,
                ds1: true,
                ds2: true,
                ruleForm: {
                    safeName: '',
                    messageChannel: [],
                    weatherType: '',
                    isUse: '',
                    desc: '',
                    desc2: '',
                },
                rules: {
                    safeName: [
                        { required: true, message: '请选择服务', trigger: 'change' }
                    ],
                    messageChannel: [
                        { type: 'array', required: true, message: '请至少选择一个消息渠道', trigger: 'change' }
                    ],
                    isUse: [
                        { required: true, message: '请选择是否生效', trigger: 'change' }
                    ],
                    
                }
            }
		},
		created () {
            if (this.$state.query && this.$state.query.messageData) {
                this.flag = true,
                this.ruleForm = {
                    ...this.$state.query.messageData,
                    messageChannel: [...this.$state.query.messageData.messageChannel.split(",")]
                }
            }
		},
        mounted() {
            this.$nextTick(()=>{
                this.showMessage()
            })
        },
		methods: {
            onSubmit (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let lsData = JSON.parse(localStorage.getItem('messageData'));
                        this.ruleForm.messageChannel =  this.ruleForm.messageChannel.join(",");
                        if(this.ruleForm.weatherType == '') { this.ruleForm.weatherType = '-' };
                        if(this.flag){
                            lsData[this.ruleForm.index - 1].safeName = this.ruleForm.safeName;
                            lsData[this.ruleForm.index - 1].freeName = this.ruleForm.freeName;
                            lsData[this.ruleForm.index - 1].messageChannel = this.ruleForm.messageChannel;
                            lsData[this.ruleForm.index - 1].weatherType = this.ruleForm.weatherType;
                            lsData[this.ruleForm.index - 1].desc = this.ruleForm.desc;
                            lsData[this.ruleForm.index - 1].desc2 = this.ruleForm.desc2;
                            lsData[this.ruleForm.index - 1].isUse = this.ruleForm.isUse;
                            lsData[this.ruleForm.index - 1].date = this.getDatetime();
                        }else{
                            this.ruleForm.date = this.getDatetime();
                            this.ruleForm.index = lsData.length + 1;
                            lsData.push(this.ruleForm);
                        }
                        localStorage.setItem('messageData', JSON.stringify(lsData));
                        this.$message.success('修改成功!')
                        this.$state.query.callback()
                        this.$modal.close()
                    } else {
                        return false;
                    }
                });
            },
            onCancel () {
                this.$modal.close();
            },
            showMessage(){
                const that = this;
                var mc = that.ruleForm.messageChannel; //已选中数组
                const v = that.cCheckList;  // 原生数组
                if(!mc || mc.length === 0) that.ds1 = that.ds2 = true;
                if(mc.length == v.length) that.ds1 = that.ds2 = false; 
                else
                    that.ds1 = that.ds2 = true;
                    Object.keys(mc).map(i => {
                        if(mc[i] == 'APP') that.ds1 = false;
                        if(mc[i] == '短信') that.ds2 = false;
                    })
            },
            getDatetime() {
                var now = new Date();
                var year = now.getFullYear();       
                var month = now.getMonth() + 1;     
                var day = now.getDate();            
                var hh = now.getHours();            
                var mm = now.getMinutes();          
                var ss = now.getSeconds();          
                var clock = year + "-";
                if (month < 10) clock += "0"; clock += month + "-";
                if (day < 10) clock += "0"; clock += day + " ";
                if (hh < 10) clock += "0";  clock += hh + ":";
                if (mm < 10) clock += '0'; clock += mm + ":";
                if (ss < 10) clock += '0'; clock += ss;
                return clock;
            }
        }
	}
</script>

<style scoped>
    .w180{ width: 180px; }
    .w300{ width: 300px; }
    .h150{ height: 150px; }
</style>
